<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
  <title>流水单</title>
  <link rel="icon" href="favicon.ico" type="image/ico">
  <meta name="author" content="yinqi">
  <link href="/static/css/bootstrap.min.css" rel="stylesheet">
  <link href="/static/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="/static/css/style.min.css" rel="stylesheet">
  <script src="/static/js/jquery-3.1.1.min.js"></script>
  <script src="/static/js/Cookie.js"></script>

</head>

<script>

  $(function () {
    //得到当前时间
    var date_now = new Date();
    //得到当前年份
    var year = date_now.getFullYear();
    //得到当前月份
    //注：
    //  1：js中获取Date中的month时，会比当前月份少一个月，所以这里需要先加一
    //  2: 判断当前月份是否小于10，如果小于，那么就在月份的前面加一个 '0' ， 如果大于，就显示当前月份
    var month = date_now.getMonth() + 1 < 10 ? "0" + (date_now.getMonth() + 1) : (date_now.getMonth() + 1);
    //得到当前日子（多少号）
    var date = date_now.getDate() < 10 ? "0" + date_now.getDate() : date_now.getDate();
    //设置input标签的max属性
    $("#endDate").attr("max", year + "-" + month + "-" + date);
    $("#startDate").attr("max", year + "-" + month + "-" + date);
    $("#startDate").attr("min", "1990-01-01");
    $("#endDate").attr("min", "1990-01-01");
  })

  $(document).ready(function () {
    let currentCookie = Cookie.get("ticker")
    $.ajax({
      url: "user/getUserName",
      type: "post",
      headers:{
        'Content-Type': 'application/json',
        'access-token': currentCookie,
      },
      success: function (data) {
        if(data.code === 200){
          $("#userName").text(data.data);

          $("#msgSet").append("个人信息设置")
          $("#changepwd").append("修改密码");
          $("#outLogin").append("退出登录");
        } else {
          window.location.href = "/"
        }

      },
      error: function (data) {
        alert("网络错误")
      }
    })
  })
  function btnSubmit() {
    var s = $("#startDate").val();
    var e = $("#endDate").val();
    var sT = $("#startTime").val();
    var eT = $("#endTime").val();
    if (s != null && e != null && s != "" && e != "") {
      if (s > e) {   //判断开始日期是否大于结束日期
        alert("您日期输入有误。");   //开始日期大于结束日期时提示
        return false;
      } else if (s == e) {
        if (sT > eT) {
          alert("您日期输入有误。");   //同一天情况下，开始时间大于结束时间时提示
          return false;
        }
      }

    }
    return true;
  }

  $(document).ready(function (){
    let searchUrl = "/account-statement/selectFlow?startDate="+"&endDate="+
            "&selectType=" + "&startTime=" +"&endTime="+ "&sortType=" + "&pageNo="+1
    let currentCookie = Cookie.get("ticker")
    $.ajax({
      url: searchUrl,
      type: "post",
      datatype:"json",
      headers:{
        'Content-Type': 'application/json',
        'access-token': currentCookie,
      },
      success: function (res) {
        console.log(res)
        if(res.code === 200){
          $("#endDate").val(res.data.endDate)
          $("#endTime").val(res.data.endTime)
          $("#startDate").val(res.data.startDate)
          $("#startTime").val(res.data.startTime)
          $("#totalPage").text("共"+ res.data.pages +"页")
          $("#currentPage").text("当前第"+res.data.pageNo+"页")
          searchData.pageNo = res.data.pageNo
          searchData.total = res.data.pages
          console.log(searchData.pageNo)
          console.log(searchData.pageNo)
          $.each(res.data.list,function (index,value){
            console.log("===")
            let str = ""
            if (value.tradeState === 1){
              str += "<tr class=\"success\">"
            } else{
              str += "<tr class=\"danger\">"
            }
            str += "<td id=\"billId\">"+value.billId+"</td>"+
                    "<td id=\"payAccount\">"+value.payAccount+"</td>"+
                    "<td id=\"payName\">"+value.payName+"</td>"+
                    "<td id=\"collAccount\">"+value.collAccount+"</td>"+
                    "<td id=\"collName\">"+value.collName+"</td>"+
                    "<td id=\"tradeTime\">"+value.tradeTime+"</td>"+
                    "<td id=\"tradeMoney\">"+value.tradeMoney+"</td>"
            if(value.tradeType === "1"){
              str += "<td id=\"tradeState\">充值</td>"
            } else if(value.tradeType === "2"){
              str += "<td id=\"tradeState\">提现</td>"
            } else {
              str += "<td id=\"tradeState\">转账</td>"
            }
            if(value.tradeState === 1){
              str += "<td id=\"tradeState\">成功</td>"
            }else {
              str += "<td id=\"tradeState\">失败</td>"
            }
            str+= "<td id=\"remarks\">"+value.remarks+"</td>"+"</tr>"
            $("#response_data").append(str)
          })
        } else {
          if (res.message === "您该时间段没有流水记录")
            $("#notFound").remove()
          alert(res.message)
        }
      },
      error: function () {
        alert("网络故障")
      }
    })
  })

</script>

<body>
<div class="lyear-layout-web">
  <div class="lyear-layout-container">
    <!--左侧导航-->
    <aside class="lyear-layout-sidebar">

      <!-- logo -->
      <div id="logo" class="sidebar-header">
        <p></p>
      </div>
      <div class="lyear-layout-sidebar-scroll">
        <nav class="sidebar-main">

          <ul class="nav nav-drawer">
            <li class="nav-item active"><a href="/toIndex"><i class="mdi mdi-home"></i> 后台首页</a></li>
            <li class="nav-item nav-item-has-subnav">
              <a href="toBinding"><i class="mdi mdi-credit-card"></i>绑定银行卡</a>
            </li>
            <li class="nav-item nav-item-has-subnav">
              <a href="toUnbinding"><i class="mdi mdi-credit-card"></i>解绑银行卡</a>
            </li>
            <li class="nav-item nav-item-has-subnav">
              <a href="toRecharge"><i class="mdi mdi-credit-card-plus"></i>充值</a>
            </li>
            <li class="nav-item nav-item-has-subnav">
              <a href="toWithdrawal"><i class="mdi mdi-credit-card-plus"></i>提现</a>
            </li>
            <li class="nav-item nav-item-has-subnav">
              <a href="toTransferAccounts"><i class="mdi mdi-credit-card-plus"></i>转账</a>
            </li>
            <li class="nav-item nav-item-has-subnav">
              <a href="toSelectFlow"><i class="mdi mdi-content-paste"></i>流水查询</a>
            </li>
          </ul>
        </nav>
      </div>

    </aside>
    <!--End 左侧导航-->

    <!--头部信息-->
    <header class="lyear-layout-header">

      <nav class="navbar navbar-default">
        <div class="topbar">

          <div class="topbar-left">
            <div class="lyear-aside-toggler">
              <span class="lyear-toggler-bar"></span>
              <span class="lyear-toggler-bar"></span>
              <span class="lyear-toggler-bar"></span>
            </div>
            <span class="navbar-page-title"> 流水查询 </span>
          </div>

          <ul class="topbar-right">
            <li class="dropdown dropdown-profile">
              <a href="javascript:void(0)" data-toggle="dropdown">
                <span id="userName"></span>
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu dropdown-menu-right">
                <li><a href="toProfile" id="msgSet"> <i class="mdi mdi-account"></i> </a></li>
                <li><a href="changepwd"><i class="mdi mdi-lock-outline"></i> 修改密码</a></li>
                <li class="divider"></li>
                <li><a href="javascript:void(0);" id="outLogin" onclick="outLogin()"><i class="mdi mdi-logout-variant"></i></a></li>
              </ul>
            </li>
            <!--切换主题配色-->
            <li class="dropdown dropdown-skin">
              <span data-toggle="dropdown" class="icon-palette"><i class="mdi mdi-palette"></i></span>
              <ul class="dropdown-menu dropdown-menu-right" data-stopPropagation="true">
                <li class="drop-title"><p>主题</p></li>
                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="site_theme" value="default" id="site_theme_1" checked>
                    <label for="site_theme_1"></label>
                  </span>
                  <span>
                    <input type="radio" name="site_theme" value="dark" id="site_theme_2">
                    <label for="site_theme_2"></label>
                  </span>
                  <span>
                    <input type="radio" name="site_theme" value="translucent" id="site_theme_3">
                    <label for="site_theme_3"></label>
                  </span>
                </li>
                <li class="drop-title"><p>LOGO</p></li>
                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="logo_bg" value="default" id="logo_bg_1" checked>
                    <label for="logo_bg_1"></label>
                  </span>
                  <span>
                    <input type="radio" name="logo_bg" value="color_2" id="logo_bg_2">
                    <label for="logo_bg_2"></label>
                  </span>
                  <span>
                    <input type="radio" name="logo_bg" value="color_3" id="logo_bg_3">
                    <label for="logo_bg_3"></label>
                  </span>
                  <span>
                    <input type="radio" name="logo_bg" value="color_4" id="logo_bg_4">
                    <label for="logo_bg_4"></label>
                  </span>
                  <span>
                    <input type="radio" name="logo_bg" value="color_5" id="logo_bg_5">
                    <label for="logo_bg_5"></label>
                  </span>
                  <span>
                    <input type="radio" name="logo_bg" value="color_6" id="logo_bg_6">
                    <label for="logo_bg_6"></label>
                  </span>
                  <span>
                    <input type="radio" name="logo_bg" value="color_7" id="logo_bg_7">
                    <label for="logo_bg_7"></label>
                  </span>
                  <span>
                    <input type="radio" name="logo_bg" value="color_8" id="logo_bg_8">
                    <label for="logo_bg_8"></label>
                  </span>
                </li>
                <li class="drop-title"><p>头部</p></li>
                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="header_bg" value="default" id="header_bg_1" checked>
                    <label for="header_bg_1"></label>
                  </span>
                  <span>
                    <input type="radio" name="header_bg" value="color_2" id="header_bg_2">
                    <label for="header_bg_2"></label>
                  </span>
                  <span>
                    <input type="radio" name="header_bg" value="color_3" id="header_bg_3">
                    <label for="header_bg_3"></label>
                  </span>
                  <span>
                    <input type="radio" name="header_bg" value="color_4" id="header_bg_4">
                    <label for="header_bg_4"></label>
                  </span>
                  <span>
                    <input type="radio" name="header_bg" value="color_5" id="header_bg_5">
                    <label for="header_bg_5"></label>
                  </span>
                  <span>
                    <input type="radio" name="header_bg" value="color_6" id="header_bg_6">
                    <label for="header_bg_6"></label>
                  </span>
                  <span>
                    <input type="radio" name="header_bg" value="color_7" id="header_bg_7">
                    <label for="header_bg_7"></label>
                  </span>
                  <span>
                    <input type="radio" name="header_bg" value="color_8" id="header_bg_8">
                    <label for="header_bg_8"></label>
                  </span>
                </li>
                <li class="drop-title"><p>侧边栏</p></li>
                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="sidebar_bg" value="default" id="sidebar_bg_1" checked>
                    <label for="sidebar_bg_1"></label>
                  </span>
                  <span>
                    <input type="radio" name="sidebar_bg" value="color_2" id="sidebar_bg_2">
                    <label for="sidebar_bg_2"></label>
                  </span>
                  <span>
                    <input type="radio" name="sidebar_bg" value="color_3" id="sidebar_bg_3">
                    <label for="sidebar_bg_3"></label>
                  </span>
                  <span>
                    <input type="radio" name="sidebar_bg" value="color_4" id="sidebar_bg_4">
                    <label for="sidebar_bg_4"></label>
                  </span>
                  <span>
                    <input type="radio" name="sidebar_bg" value="color_5" id="sidebar_bg_5">
                    <label for="sidebar_bg_5"></label>
                  </span>
                  <span>
                    <input type="radio" name="sidebar_bg" value="color_6" id="sidebar_bg_6">
                    <label for="sidebar_bg_6"></label>
                  </span>
                  <span>
                    <input type="radio" name="sidebar_bg" value="color_7" id="sidebar_bg_7">
                    <label for="sidebar_bg_7"></label>
                  </span>
                  <span>
                    <input type="radio" name="sidebar_bg" value="color_8" id="sidebar_bg_8">
                    <label for="sidebar_bg_8"></label>
                  </span>
                </li>
              </ul>
            </li>
            <!--切换主题配色-->
          </ul>

        </div>
      </nav>

    </header>
    <!--End 头部信息-->

    <!--页面主要内容-->

    <main class="lyear-layout-content">
      <div class="container-fluid">
        <div class="row">
          <div class="card">
            <div class="card-toolbar clearfix">
              <form id="search_Item_Form">
                <div class="c1">
                  开始日期:<input name="startDate" id="startDate" type="date" class="startDate">

                  结束日期:<input name="endDate" id="endDate" type="date" class="endDate">

                  业务类型：<select name="selectType" id="selectType" class="selectType">
                  <option  value="0">全部</option>
                  <option  value="1">充值</option>
                  <option  value="2">提现</option>
                  <option  value="3">转账</option>
                </select></div>
                <br/><br/>
                开始时间(选填):<input name="startTime" id="startTime" type="time" class="startTime">
                <button type="button" id="button_clearS"
                        onclick="document.getElementById('startTime').value='00:00'">还原
                </button>
                结束时间(选填):<input name="endTime" id="endTime" type="time" class="endTime">
                <button type="button" id="button_clearE"
                        onclick="document.getElementById('endTime').value='23:59'">还原
                </button>
                排序：<select name="sortType" id="sortType" class="sortType">
                <option  value="0">降序</option>
                <option  value="1">升序</option>
              </select>
                <br/><br/>
              </form>
              <button type="submit" class="btn btn-primary" id="submit_btn" onclick="searchAccountFlow(1)">查询</button>
              <div class="card-body">
                <table class="table table-hover"id="response_data">
                  <thead >
                  <tr>
                    <th>流水单号</th>
                    <th>付款人账户</th>
                    <th>付款人姓名</th>
                    <th>收款人账户</th>
                    <th>收款人姓名</th>
                    <th>交易时间</th>
                    <th>交易金额(元)</th>
                    <th>交易类型</th>
                    <th>交易状态</th>
                    <th>备注</th>
                  </tr>
                  </thead>
                  <div class="table-responsive" id="notFound">
                  </div>
                </table>
              </div>
              <div>
                <span id="totalPage"></span>
                | <span id="currentPage"></span>
                | <a id="fistPage" onclick="searchAccountFlow(1)">首页</a>
                <span id="prePage" onclick="prePage()"><a> | 上一页 </a></span>
                |<span id="nextPage" onclick="nextPage()"><a>下一页 |</a></span>
                <a id="lastPage"onclick="searchAccountFlow(searchData.total)">尾页</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>

<!--图表插件-->
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="/static/js/main.min.js"></script>
<script th:inline="javascript" type="text/javascript">
  let searchData = {
    startDate: null,
    endDate: null,
    selectType: null,
    startTime: null,
    endTime: null,
    sortType: null,
    pageNo: null,
    total: null
  }
  function searchAccountFlow(pageNo){
    if (!btnSubmit()) {
      return false;
    }
    let formData = new FormData(document.getElementById("search_Item_Form"))
    let currentCookie = Cookie.get("ticker")
    searchData.startDate = formData.get("startDate")
    searchData.endDate = formData.get("endDate")
    searchData.selectType = formData.get("selectType")
    searchData.startTime = formData.get("startTime")
    searchData.endTime = formData.get("endTime")
    searchData.sortType = formData.get("sortType")
    let searchUrl = "/account-statement/selectFlow?startDate="+searchData.startDate+"&endDate="+searchData.endDate+
            "&selectType="+searchData.selectType + "&startTime="+searchData.startTime +"&endTime="+searchData.endTime+
            "&sortType="+searchData.sortType + "&pageNo="+pageNo
    console.log(currentCookie)
    $.ajax({
      url: searchUrl,
      type: "post",
      datatype:"json",
      headers:{
        'Content-Type': 'application/json',
        'access-token': currentCookie,
      },
      success: function (res) {
        console.log(res)
        if(res.code === 200){
          $("#endDate").val(res.data.endDate)
          $("#endTime").val(res.data.endTime)
          $("#startDate").val(res.data.startDate)
          $("#startTime").val(res.data.startTime)
          $("#totalPage").text("共"+ res.data.pages +"页")
          $("#currentPage").text("当前第"+res.data.pageNo+"页")
          searchData.pageNo = res.data.pageNo
          searchData.total = res.data.pages
          console.log(searchData.pageNo)
          console.log(searchData.pageNo)
          console.log("===")
          let str = ""
          $.each(res.data.list,function (index,value){
            if (value.tradeState === 1){
              str += "<tr class=\"success\">"
            } else{
              str += "<tr class=\"danger\">"
            }
            str += "<td id=\"billId\">"+value.billId+"</td>"+
                    "<td id=\"payAccount\">"+value.payAccount+"</td>"+
                    "<td id=\"payName\">"+value.payName+"</td>"+
                    "<td id=\"collAccount\">"+value.collAccount+"</td>"+
                    "<td id=\"collName\">"+value.collName+"</td>"+
                    "<td id=\"tradeTime\">"+value.tradeTime+"</td>"+
                    "<td id=\"tradeMoney\">"+value.tradeMoney+"</td>"
            if(value.tradeType === "1"){
              str += "<td id=\"tradeState\">充值</td>"
            } else if(value.tradeType === "2"){
              str += "<td id=\"tradeState\">提现</td>"
            } else{
              str += "<td id=\"tradeState\">转账</td>"
            }
            if(value.tradeState === 1){
              str += "<td id=\"tradeState\">成功</td>"
            }else {
              str += "<td id=\"tradeState\">失败</td>"
            }
            str+= "<td id=\"remarks\">"+value.remarks+"</td>"+"</tr>"

          })
          $("#response_data tr:not(:first)").remove()
          $("#response_data").append(str)
        } else {
          if(res.message === '您该时间段没有流水记录'){
            $("#response_data tr:not(:first)").remove()
            alert("当前时间段您没有账单流水记录")
          }else {
            alert(res.message)
          }
        }
      },
      error: function () {
        alert("网络故障")
      }
    })

  }
  function nextPage(){
    if(searchData.total > searchData.pageNo) {
      searchData.pageNo += 1
      searchAccountFlow(searchData.pageNo)
    }
  }
  function prePage(){
    if(0 < searchData.pageNo) {
      searchData.pageNo -= 1
      searchAccountFlow(searchData.pageNo)
    }
  }

  function outLogin(){
    let currentCookie = Cookie.get("ticker")
    $.ajax({
      url: "toLogin",
      type: "post",
      datatype:"json",
      headers:{
        'Content-Type': 'application/json',
        'access-token': currentCookie,
      },
      success: function (res) {
        if(res.code === 200) {
          window.location.href = "/"
        }
      },
      error: function () {
        alert("网络故障")
      }
    })
  }

</script>
</body>
</html>
